<template>
	<div class="aid">
		<div class="base">
			<p class="fixed-top">
				{{ JSON.stringify(text) == '{}' ? '添加场地禁用' : '修改场地禁用' }}
				<a-icon class="icon-close" @click="closeFunction" type="close-circle" />
			</p>
			<div class="main" id="new_message">
				<a-form :form="form">
					<a-form-item label="备注">
						<a-input type="textarea" v-decorator="['Remark', { rules: [{ required: true, message: '请输入备注' }] }]" />
					</a-form-item>
					<a-form-item label="禁用时间">
						<a-range-picker show-time v-decorator="['datetime', { rules: [{ required: true, message: '请选择禁用时间' }] }]" format="YYYY-MM-DD HH:mm" />
					</a-form-item>
					<a-form-item class="fixed-bottom">
						<a-button type="primary" @click="handleSubmit">{{ JSON.stringify(text) == '{}' ? '确认添加' : '确认修改' }}</a-button>
						<a-button style="margin-left: 10px;" @click="closeFunction">取消</a-button>
					</a-form-item>
				</a-form>
			</div> 
		</div>
	</div>
</template>

<script>
import moment from 'moment';
import { AddVenueDisable, DoUpdateVenueDisable } from '@/api/follow';
export default {
	props: {
		text: Object
	},
	watch: {
		text: function(text) {
			if (JSON.stringify(text) == '{}') {
				this.currentID = ''
			} else {
				let that = this;
				that.currentID = text.ID;
				setTimeout(function() {
					that.form.setFieldsValue({
						Remark: text.Remark,
						datetime: [text.StartTime,text.EndTime],
					});
				}, 300);
			}
		}
	},
	data() {
		return {
			loading: false,
			formLayout: 'horizontal',
			form: this.$form.createForm(this, {
				name: 'coordinated'
			}),
			currentID: ''
		};
	},
	created() {},
	methods: {
		moment,
		closeFunction(data) {
			this.form.resetFields();
			this.$emit('closeFun', data);
		},
		handleSubmit(e) {
			this.form.validateFields(async (err, values) => {
				if (!err) {
					console.log('Received values of form: ', values);
					let data = {};
					data.VenueID = this.$route.query.id
					data.Remark = values.Remark
					data.StartTime = values.datetime[0].format('YYYY-MM-DD HH:mm')
					data.EndTime = values.datetime[1].format('YYYY-MM-DD HH:mm')
					let res = {};
					if (JSON.stringify(this.text) == '{}') {
						res = await AddVenueDisable(data);
					} else {
						data.id = this.currentID;
						res = await DoUpdateVenueDisable(data);
					}
					if (res.data.code === 0) {
						this.$message.success(res.data.msg);
						this.closeFunction('1');
					} else {
						this.$message.error(res.data.msg);
					}
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.aid {
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	top: 0px;
	left: 0px;
	z-index: 999;
}
.base {
	position: absolute;
	width: 600px;
	height: 540px;
	border-radius: 14px;
	background: #fff;
	left: 50%;
	margin-left: -300px;
	top: 50%;
	margin-top: -270px;
	overflow-y: auto;
}
.main {
	height: 90%;
	overflow-y: scroll;
}
/deep/.ant-form {
	margin-top: 50px;
	padding-bottom: 50px;
}
/deep/.ant-form-item {
	margin: 20px 50px;
	display: flex;
}
/deep/.ant-form-item-label {
	width: 100px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: right;
}
/deep/.ant-form-item-control-wrapper {
	flex: 1;
}
/deep/.ant-calendar-picker {
	width: 100%!important;
}
.ant-upload-list-picture-card-container {
	width: 80px;
	height: 80px;
}
.fixed-top {
	width: inherit;
	position: absolute;
	line-height: 30px;
	top: 0px;
	background-color: white;
	z-index: 999;
	padding: 10px 0 5px 10px;
	.icon-close {
		font-size: 20px;
		float: right;
		margin: 5px 10px;
	}
}
.fixed-bottom {
	width: 164px;
	left: 50%;
	bottom: 0px;
	margin: 0px 0px 0px -82px !important;
	position: absolute;
	background-color: white;
	z-index: 999;
}
</style>
